<template>
  <border :moduleType="borderConfig.moduleType"
          :icon="borderConfig.icon"
          :titleText="borderConfig.titleText"
          :organType="borderConfig.organType"
          :goPageUrl="borderConfig.goPageUrl">
    <div class="goals-achieved"
         slot="module-content">
      <div class="goals-achieved--container">
        <div class="goals-achieved--container--message">
          <message class="goals-achieved--container--message__item"
                   message-name="机构总数"
                   :message-number="goalsAchievedData.organNum"
                   :message-unit="''"></message>
          <message class="goals-achieved--container--message__item"
                   message-name="达标机构数"
                   :message-number="goalsAchievedData.finishNum"
                   :message-unit="''"></message>
          <message class="goals-achieved--container--message__item"
                   message-name="机构完成率"
                   :message-number="goalsAchievedData.finishRate + '%'"
                   :message-unit="''"></message>
        </div>
        <div class="goals-achieved--container--chart"
             ref="goalsAchievedChart">

        </div>
      </div>
      <div class="goals-achieved--container table">
        <div class="goals-achieved--container--headouter">
          <table class="goals-achieved--container--table"
                 cellspacing="0">
            <colgroup>
              <col width="37%">
              <col width="21%">
              <col width="21%">
              <col width="21%">
            </colgroup>
            <thead>
              <tr class="goals-achieved--container--table__tr">
                <th class="goals-achieved--container--table__title">
                  <p>公司名称</p>
                </th>
                <th class="goals-achieved--container--table__title">
                  <p>计划<span>(万元)</span></p>
                </th>
                <th class="goals-achieved--container--table__title">
                  <p>实际<span>(万元)</span></p>
                </th>
                <th class="goals-achieved--container--table__title">
                  <p>差额<span>(万元)</span></p>
                </th>
              </tr>
            </thead>
          </table>
        </div>
        <div ref="goalsAchievedTable"
             class="goals-achieved--container--outer">
          <table class="goals-achieved--container--table"
                 cellspacing="0">
            <colgroup>
              <col width="37%">
              <col width="21%">
              <col width="21%">
              <col width="21%">
            </colgroup>
            <tbody>
              <tr class="goals-achieved--container--table__tr"
                  :key="item.name + key"
                  v-for="(item, key) in goalsAchievedData.resultList">
                <td :style="{height: tdHeight}"
                    class="goals-achieved--container--table__content">
                  <p>{{cutString(item.name)}}</p>
                </td>
                <td :style="{height: tdHeight}"
                    class="goals-achieved--container--table__content">
                  <p>{{item.totalPlanIncome}}</p>
                </td>
                <td :style="{height: tdHeight}"
                    class="goals-achieved--container--table__content">
                  <p>{{item.totalIncome}}</p>
                </td>
                <td :style="{height: tdHeight}"
                    class="goals-achieved--container--table__content">
                  <p :class="item.planBalance > 0 ? 'red' : 'green'">{{item.planBalance}}</p>
                </td>
              </tr>
            </tbody>

          </table>
        </div>

      </div>
    </div>

  </border>
</template>

<script>

import Border from '@/views/components/Border.vue'
import Message from '@/views/assetsManagement/components/Message.vue'
import echarts from 'echarts'

function deepMerge (FirstOBJ, SecondOBJ) { // 深度合并对象
  for (var key in SecondOBJ) {
    FirstOBJ[key] = FirstOBJ[key] && typeof FirstOBJ[key] === 'object'
      ? deepMerge(FirstOBJ[key], SecondOBJ[key]) : FirstOBJ[key] = SecondOBJ[key]
  }
  return FirstOBJ
}

function cutString (value) {
  let res = value
  if (res.length > 12) {
    res = res.substring(0, 10) + '...'
  }
  if (res.length > 6) {
    res = res.substring(0, 6) + '\n' + res.substring(6, res.length)
  }
  return res
}

const chartConfig = {
  title: {
    show: false
  },
  grid: {
    left: '5%',
    right: '4%',
    bottom: '7%',
    top: '8%',
    containLabel: true
  },
  color: ['#ffae00', '#4568f8'],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {
    icon: 'rect',
    itemWidth: 10,
    itemHeight: 10,
    left: 'center',
    top: 'bottom',
    textStyle: {
      color: '#a4b3c7'
    }
  },
  xAxis: [
    {
      type: 'value',
      name: '万元',
      nameLocation: 'start',
      nameTextStyle: {
        color: '#72acec',
        padding: [28, 0, 0, 0]
      },
      splitLine: {
        show: false
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: '#72acec', // 更改坐标轴文字颜色
          fontSize: 12 // 更改坐标轴文字大小
        }
      },
      axisTick: {
        show: false
      },
      axisLine: {
        lineStyle: {
          color: '#3a4361' // 更改坐标轴颜色
        }
      }
    }
  ],
  yAxis: [
    {
      type: 'category',
      name: '价值(万元)',
      nameLocation: 'start',
      nameTextStyle: {
        color: '#72acec'
      },
      splitLine: {
        show: false
      },
      axisLabel: {
        show: true,
        formatter: function (value) {
          return cutString(value)
        },
        textStyle: {
          color: '#72acec',
          fontSize: 12
        }
      },
      axisTick: {
        show: false
      },
      axisLine: {
        lineStyle: {
          color: '#3a4361' // 更改坐标轴颜色
        }
      }
    }
  ],
  series: [
    {
      type: 'bar',
      label: {
        show: true,
        position: 'inside'
      }
    },
    {
      type: 'bar',
      label: {
        show: true,
        position: 'inside'
      }
    }
  ]
}
export default {
  data () {
    return {
      timer: null,
      borderConfig: {
        moduleType: '2x2',
        icon: '',
        titleText: '管理主体目标达成'
      },
      moduleConfig: {
        isOctagon: false, // 是否需要头部的八边形
        topType: '13', // 第一层显示内容
        bottomType: '14' // 第二层显示内容
      },
      tableHeight: '',
      tableRows: 8,
      showIndex: 0,
      goalsAchievedChart: {},
      goalsAchievedData: {
        organNum: '---',
        finishNum: '---',
        finishRate: '---',
        resultList: []
      }
    }
  },
  mounted () {
    // this.getData()
    //   .then(res => {
    //     this.initChart()
    //     this.$nextTick(() => {
    //       this.initTable()
    //     })
    //   })
  },
  methods: {
    getData () {
      return this.assetsManagementApi.targetManager({
        organId: this.organId
      })
        .then(result => {
          const resData = result.data
          if (+resData.code === 0) {
            this.goalsAchievedData = resData.data
            this.initChart()
            this.$nextTick(() => {
              this.initTable()
            })
          }

          this.$nextTick(() => {
            if (this.timer) {
              clearInterval(this.timer)
            }
            this.timer = setInterval(() => {
              this.showIndex = this.showIndex + this.tableRows < this.goalsAchievedData.resultList.length ? this.showIndex + 1 : 0
              this.updateChart()
              this.updateTable()
            }, 3000)
          })
        })
    },
    initChart () {
      this.goalsAchievedChart = echarts.init(this.$refs.goalsAchievedChart)
      this.goalsAchievedChart.setOption(this.getChartOpiton())
    },
    updateChart () {
      this.goalsAchievedChart.setOption(this.getChartOpiton())
    },
    initTable () {
      let table = this.$refs.goalsAchievedTable
      this.tableHeight = table.offsetHeight
    },
    updateTable () {
      const table = this.$refs.goalsAchievedTable
      const tdHeight = table.getElementsByTagName('td')[0].offsetHeight
      table.scrollTop = this.showIndex * tdHeight
    },
    getChartOpiton () {
      return deepMerge({
        legend: {
          data: ['目标完成率', '实际完成率']
        },
        yAxis: [
          {
            inverse: true,
            data: this.chartShowData.map(v => {
              return v.name
            })
          }
        ],
        series: [
          {
            name: '目标完成率',
            data: this.chartShowData.map(v => {
              return v.targetFinishRate
            })
          },
          {
            name: '实际完成率',
            data: this.chartShowData.map(v => {
              return v.finishRate
            })
          }
        ]
      }, chartConfig)
    },
    cutString (value) {
      return cutString(value)
    }
  },
  computed: {
    organId () {
      return this.$store.state.organId
    },
    tdHeight () {
      return this.tableHeight ? ((this.tableHeight / this.tableRows) - 3) + 'px' : 'auto'
    },
    chartShowData () {
      return this.goalsAchievedData.resultList.slice(this.showIndex, this.tableRows + this.showIndex)
    }
  },
  components: {
    Border,
    Message
  }
}
</script>

<style lang="scss" scoped>
.goals-achieved {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;

  &--container {
    width: 50%;
    height: 100%;

    &--message {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 15%;

      &__item {
        width: 27.5%;
        margin: 0 2%;
        flex-grow: 0;
      }
    }

    &--chart {
      width: 100%;
      height: 85%;
    }

    &--headouter {
      width: 95%;
      margin-right: 5%;
      margin-top: 3%;
      border: 1px solid #0d3877;
      border-bottom: none;
    }

    &--outer {
      width: 95%;
      margin-right: 5%;
      margin-top: -2px;
      border: 1px solid #0d3877;
      border-top: none;
      height: 85%;
      overflow-y: auto;

      &::-webkit-scrollbar {
        width: 6px;
        height: 6px;
        background-color: transparent;
        // display: none;
      }

      /*定义滚动条轨道 内阴影+圆角*/
      &::-webkit-scrollbar-track {
        border-radius: 10px;
        background-color: transparent;
      }

      /*定义滑块 内阴影+圆角*/
      &::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background-color: #1a3070;
      }
    }

    &--table {
      color: #7aabe7;
      width: 100%;
      table-layout: fixed;
      word-break: break-all;
      // width: 95%;
      // margin-right: 5%;
      // margin-top: 3%;
      // border: 1px solid #0d3877;

      &__title {
        padding: 10px 0;
        border-bottom: 1px solid #0d3877;
        & > p {
          font-size: 14px;
          padding-left: 10px;
          // text-indent: 16px ;
          // padding: 0 16px;

          text-align: left;
          & > span {
            font-size: 12px;
          }
        }
      }

      &__content {
        // padding: 10px 0;
        border-bottom: 1px solid #0d3877;
        > p {
          text-align: left;
          // padding: 0 16px;
          padding-left: 10px;

          &.red {
            color: #f74a8f;
          }

          &.green {
            color: #01b26c;
          }
        }
      }
    }
  }
}
</style>
